<template>
	<div class="law">
		<img class="about-bg" src="../../assets/img/zhengcefaguiBG.png" />


		<el-row type="flex" justify="center">
			<el-row class="Navsousuo" type="flex" justify="space-between">
				<el-col>
					<el-breadcrumb separator="/" style="font-size: 13px;">
						<el-breadcrumb-item>当期那位置：政策法规</el-breadcrumb-item>
						<el-breadcrumb-item>{{ PageName }}</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>
				<el-col style="width: 335px;height: 38px;">
					<el-input placeholder="请输入内容" :clearable="true" v-model="sousuoneirong">
						<el-button slot="append" icon="el-icon-search" @click="Sousuo"></el-button>
					</el-input>
				</el-col>
			</el-row>
		</el-row>
		<el-row type="flex" justify="center">
			<el-tabs class="wlmainW" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="国家政策法规" name="guojiafagui">
          <newsXiangqing v-if="isshowXiangqing" @WLxiangqingguanbi = "WLxiangqingguanbi" :Newxiangqingdata = "xiangqingdata"></newsXiangqing>

					<WLNewsTable v-if="isRouterAlive && !isshowXiangqing" :Newdata="zhengcexianfaList" :Newtotal = "guojiazhengcetotal" :Newpagedangqianye = "pagedangqianye" :Newname = "2" @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick"></WLNewsTable>
				</el-tab-pane>
				<el-tab-pane label="交易规则" name="jiaoyiguize" >
          <newsXiangqing v-if="isshowXiangqing" @WLxiangqingguanbi = "WLxiangqingguanbi" :Newxiangqingdata = "xiangqingdata"></newsXiangqing>

					<WLNewsTable v-if="isRouterAlive && !isshowXiangqing" :Newdata="jiaoyiguizeList" :Newtotal = "jiaoyiguizetotal" :Newpagedangqianye = "pagedangqianye" :Newname = "2"  @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick"></WLNewsTable>
				</el-tab-pane>
				<el-tab-pane label="自律声明" name="zilvshengming" >
          <newsXiangqing v-if="isshowXiangqing" @WLxiangqingguanbi = "WLxiangqingguanbi" :Newxiangqingdata = "xiangqingdata"></newsXiangqing>

					<WLNewsTable  v-if="isRouterAlive && !isshowXiangqing" :Newdata="zilvshengmingList" :Newtotal = "zilvshengmingtotal" :Newpagedangqianye = "pagedangqianye" :Newname = "2" @WLpageindex = "WLpageindex" @WLcellClick = "WLcellClick"></WLNewsTable>

				</el-tab-pane>

			</el-tabs>
		</el-row>

	</div>
</template>

<script>
import WLNewsTable from '@/components/News/WLNewsTable.vue';
import newsXiangqing from '@/components/News/newsXiangqing.vue';
import { getZhengcefaguiList } from "@/api/zhengcefagui.js";
import { getnewsXaingqign } from "@/api/zhengcefagui.js";



var pageNo;
var pageSize;
export default {
	name: 'Law',
	components: {
		WLNewsTable,
    newsXiangqing
	},
	data() {
		return {
			sousuoneirong: '',
			PageName: '国家政策法规',
			activeName: 'guojiafagui', //选中了哪里
      activeindexname:'nation_policies_regulations',
      activeindex:0,
      isRouterAlive: true,


//判断显示隐藏详情
      isshowXiangqing:false,
      xiangqingdata:'',

			zhengcexianfaList: [
			],

      guojiazhengcetotal:0,//总条数
      jiaoyiguizetotal:0,//总条数

      zilvshengmingtotal:0,//总条数

      pagedangqianye:1,//当前页
			jiaoyiguizeList: [
			],
			zilvshengmingList: [
			],
      searchData:''
		};
	},
	computed: {},
	watch: {},
	methods: {
    getNewdata(){
          const _self = this;
            getZhengcefaguiList({
              firstType:'policies_regulations',
              secondType:_self.activeindexname,
              pageNo:pageNo,
              pageSize:pageSize
             }).then((res) => {
               let { success, message } = res.data;
               if (success) {
                 // _self.$message.success(message);
                if (this.activeindex == 0){

                   _self.guojiazhengcetotal = res.data.result.total;
                   _self.zhengcexianfaList = [];
                   _self.zhengcexianfaList =  res.data.result.records;

                }else  if (this.activeindex == 1){

                    _self.jiaoyiguizetotal = res.data.result.total;
                    _self.jiaoyiguizeList = [];
                    _self.jiaoyiguizeList =  res.data.result.records;

                }else  if (this.activeindex == 2){
                    _self.zilvshengmingtotal = res.data.result.total;
                    _self.zilvshengmingList = [];
                    _self.zilvshengmingList =  res.data.result.records;

                }
                this.isRouterAlive = false
                this.$nextTick(() => (this.isRouterAlive = true))





               } else {
                 _self.$message.error(message);
               }
             });

    },



		Sousuo() {
			if (this.sousuoneirong) {
			  this.$router.push({
			    path: '/search',
			    query: {
			      keyword: this.sousuoneirong
			    }
			  })
			} else {
			  this.$message.error('请输入关键字搜索')
			}
		},
		handleClick(tab, event) {
      pageNo = 1;
      this.pagedangqianye = 1;

      this.isshowXiangqing = false;

			this.PageName = tab.label;
      this.activeindex = tab.index;
      if (tab.index == 0){
         this.activeindexname = 'nation_policies_regulations';
      }else  if (tab.index == 1){
         this.activeindexname = 'trading_rules';
      }else  if (tab.index == 2){
         this.activeindexname = 'selfdiscipline_declare';
      }


      this.getNewdata();





		},
		//进入详情
		WLcellClick(val) {



      const _self = this;
        getnewsXaingqign({
          id:val.id
         }).then((res) => {
           let { success, message } = res.data;
           if (success) {
             // _self.$message.success(message);

             this.xiangqingdata = res.data.result.content;


             this.isshowXiangqing = true;





           } else {
             _self.$message.error(message);
           }
         });









		},
		//监听页数
		WLpageindex(val){
			pageNo = val;
			this.pagedangqianye = pageNo;
			this.getNewdata();
		},
    WLxiangqingguanbi(){
      this.isshowXiangqing = false;

    }

	},
	created() {
		pageNo = 1;
		pageSize = 15;
		this.getNewdata();
	},
	mounted() {
	}
};
</script>

<style lang="less" >
.law {
	background-color: #f0f0f0;
	//重写样式

	.is-active {
		color: #ffffff !important;
		background-color: #1d3f95 !important;
		border-radius: 10px 10px 0px 0px;
	}
	.el-tabs__item {
		color: #1d3f95;
		padding: 0;
		width: 120px;
		text-align: center;
		height: 42px;
	}
	.el-tabs__nav-wrap::after {
		background-color: #1d3f95;
	}
	.el-tabs__active-bar {
		background-color: #1d3f95;
	}
}
// .tablediv {
// 	width: 1200px;
// 	max-height: 940px;
// 	padding: 30px;
// 	background-color: #ffffff;
// }
.wlmainW {
	width: 1200px;
}
.Navsousuo {
	width: 1200px;
	height: 70px;
	// background-color: antiquewhite;
	padding: 16px;
}
.about-bg {
	width: 100%;
	min-width: 1200px;
	min-height: 370px;
}
.header {
	width: 100%;
	position: absolute;
	z-index: 10;
	top: 0;
}
.footer {
	width: 100%;
	position: absolute;
	z-index: 10;
	bottom: -120px;
}

//重写tab样式
</style>
